<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid black;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="550"></canvas>
    <script>
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.font = 'bold 28px serif';

        // Coordinates
        const A = { x: 150, y: 280 };
        const B = { x: 380, y: 450 };
        const C = { x: 150, y: 120 };
        
        // --- Drawing components ---

        // 1. Draw the Wall and Hatching
        const wallX = 90;
        ctx.beginPath();
        ctx.moveTo(wallX, 50);
        ctx.lineTo(wallX, 500);
        ctx.stroke();

        // Hatching lines
        ctx.lineWidth = 1;
        for (let i = 60; i < 500; i += 15) {
            ctx.beginPath();
            ctx.moveTo(wallX, i);
            ctx.lineTo(wallX - 20, i + 20);
            ctx.stroke();
        }
        ctx.lineWidth = 3; // Reset line width

        // 2. Draw the vertical dashed-dotted line
        ctx.save();
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.setLineDash([15, 5, 5, 5]);
        ctx.beginPath();
        ctx.moveTo(A.x, 70);
        ctx.lineTo(A.x, 500);
        ctx.stroke();
        ctx.restore();

        // 3. Draw Rod AB and Rope BC
        ctx.beginPath();
        ctx.moveTo(A.x, A.y);
        ctx.lineTo(B.x, B.y);
        ctx.moveTo(B.x, B.y);
        ctx.lineTo(C.x, C.y);
        ctx.stroke();

        // 4. Draw Hinges and Brackets
        // Hinge at A
        ctx.beginPath();
        ctx.moveTo(wallX, A.y - 12);
        ctx.lineTo(A.x, A.y);
        ctx.lineTo(wallX, A.y + 12);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(A.x, A.y, 10, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(A.x, A.y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();

        // Hinge at C
        ctx.beginPath();
        ctx.moveTo(wallX, C.y - 12);
        ctx.lineTo(C.x, C.y);
        ctx.lineTo(wallX, C.y + 12);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(C.x, C.y, 10, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();


        // 5. Draw Angle Arcs and Labels

        // 60 degree angle
        const angle60Radius = 60;
        ctx.beginPath();
        const startAngle60 = Math.PI / 2; // Vertical down
        const rodAngle = Math.atan2(B.y - A.y, B.x - A.x);
        ctx.arc(A.x, A.y, angle60Radius, rodAngle, startAngle60);
        ctx.stroke();
        // Arrow for 60 deg
        const arrowMidAngle60 = (rodAngle + startAngle60) / 2;
        const arrowX = A.x + angle60Radius * Math.cos(arrowMidAngle60);
        const arrowY = A.y + angle60Radius * Math.sin(arrowMidAngle60);
        const arrowLength = 10;
        const arrowAngle = Math.PI / 4;
        ctx.beginPath();
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX - arrowLength * Math.cos(arrowMidAngle60 - arrowAngle), arrowY - arrowLength * Math.sin(arrowMidAngle60 - arrowAngle));
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX - arrowLength * Math.cos(arrowMidAngle60 + arrowAngle), arrowY - arrowLength * Math.sin(arrowMidAngle60 + arrowAngle));
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX + arrowLength * Math.cos(arrowMidAngle60 - arrowAngle), arrowY + arrowLength * Math.sin(arrowMidAngle60 - arrowAngle));
        ctx.moveTo(arrowX, arrowY);
        ctx.lineTo(arrowX + arrowLength * Math.cos(arrowMidAngle60 + arrowAngle), arrowY + arrowLength * Math.sin(arrowMidAngle60 + arrowAngle));
        ctx.stroke();
        ctx.fillText('60°', A.x + 35, A.y + 60);

        // 30 degree angle
        const angle30Radius = 60;
        const angleBA = Math.atan2(A.y - B.y, A.x - B.x);
        const angleBC = Math.atan2(C.y - B.y, C.x - B.x);
        ctx.beginPath();
        ctx.arc(B.x, B.y, angle30Radius, angleBC, angleBA);
        ctx.stroke();
        // Mark on arc for 30 deg
        const midAngle30 = (angleBA + angleBC) / 2;
        const markStart_x = B.x + (angle30Radius - 5) * Math.cos(midAngle30);
        const markStart_y = B.y + (angle30Radius - 5) * Math.sin(midAngle30);
        const markEnd_x = B.x + (angle30Radius + 5) * Math.cos(midAngle30);
        const markEnd_y = B.y + (angle30Radius + 5) * Math.sin(midAngle30);
        ctx.beginPath();
        ctx.moveTo(markStart_x, markStart_y);
        ctx.lineTo(markEnd_x, markEnd_y);
        ctx.stroke();

        ctx.fillText('30°', B.x - 90, B.y - 15);


        // 6. Draw Labels for Points A, B, C
        ctx.fillStyle = 'black';
        ctx.fillText('A', A.x + 15, A.y + 10);
        ctx.fillText('B', B.x + 15, B.y + 5);
        ctx.fillText('C', C.x + 15, C.y + 10);
        
        // Pin at B
        ctx.beginPath();
        ctx.arc(B.x, B.y, 8, 0, 2 * Math.PI);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.stroke();


    </script>
</body>
</html>